Skip to content

디자인 토큰 구조 정립 (typography, dimension, radius, color)#4

Merged
yhyem merged 16 commits intomainfrom
feature/typography-token
Mar 5, 2026
Merged

디자인 토큰 구조 정립 (typography, dimension, radius, color)#4
yhyem merged 16 commits intomainfrom
feature/typography-token

Conversation

@yhyem
Copy link
Contributor

@yhyem yhyem commented Jan 27, 2026

Summary

피그마 시안 기준으로 디자인 토큰을 구현하고, DTCG 스펙에 맞게 토큰 구조를 정립했습니다.

Changes

토큰 추가

  • Typography: semantic typography 27종 (display, title, body, label, caption)
  • Dimension: fontSize 13단계 + lineHeight 13단계
  • Radius: radius 토큰
  • Font: Pretendard Variable 폰트 설정 (CSS import 토큰)

토큰 수정

  • Color: primitive color RGB 값 수정, 그룹명 colorscolor 단수형 통일

구조 개선

  • 폴더 구조를 피그마 기준으로 재구성 (color/, dimension/, radius/, typography/)
  • $type을 그룹 레벨에 선언하여 DTCG 스펙 준수 (개별 토큰 반복 제거)
  • 모든 토큰 파일에 $schema 참조 추가
  • typography 토큰에서 fontFamily 제거 (폰트는 전역 관심사로 분리)

문서화

  • tokens/README.md 토큰 컨벤션 문서 작성
    • 네이밍 규칙 (토큰명 kebab-case, 그룹명 camelCase 허용)
    • $type 선언 위치, 참조($value) 규칙, 폰트 전략 등

Notes

  • dimension 토큰의 $value가 문자열("11px")로 되어 있어 DTCG schema의 객체 형식과 불일치 → 별도 이슈로 추적 예정
  • CSS 변수 --colors-*--color-* breaking change이나, 아직 소비 코드 없음

@ndaemy ndaemy self-requested a review January 28, 2026 09:25
Copy link
Member

@ndaemy ndaemy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. hierarchy가 피그마 시안과 맞지 않는 것 같아요. 제가 읽었을 때는 primitive/semantic → colors/typography.. 가 아니라 colors → primitive/semantic 이 맞는거 같은데, 지금 이 부분이 조금 불명확하게 정해진 것 같아서 논의를 조금 해봐야 할 거 같아요!
  2. 이미 만들어진 파일과 새로 만드는 파일이 단수/복수형 표기가 맞지 않아서 통일하면 좋을 것 같아요. 단수형이 나을 것 같습니다.
  3. $schema 의 부적절한/일관되지 않은 사용이 있습니다. 확인해보시고 수정 부탁드려요!

@yhyem yhyem requested a review from ndaemy February 17, 2026 13:21
Copy link
Member

@ndaemy ndaemy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR 리뷰: typography token

🔴 Critical

1. Typography 토큰이 빌드에 포함되지 않음

config.js의 source glob 패턴이 tokens/**/*.tokens.json*인데, 새로 추가된 파일 2개가 이 패턴에 매치되지 않습니다:

파일 패턴 매치
typography/style.jsonc .tokens 누락
typography/typography.jsonc .tokens 누락

실제로 빌드를 돌려보면 tokens.css에 typography 관련 CSS 변수가 하나도 생성되지 않습니다.
style.tokens.jsonc, typography.tokens.jsonc로 이름 변경이 필요합니다.

README에도 명시되어 있습니다: "파일 이름은 *.tokens.json (or *.tokens.jsonc) 이여야 합니다."

2. 파일명 오타: primitveprimitive

color/primitve.tokens.jsonc — "primitive" 철자가 틀렸습니다.

3. $schema 경로 오류

typography/typography.jsonc에서 "$schema": "schema.json"으로 참조하고 있는데, schema 파일은 tokens/schema.json에 위치합니다. typography/ 하위에서는 "../schema.json"이어야 합니다.


🟠 Major

4. Naming convention 위반 — PascalCase 사용

README 컨벤션: "Naming은 reserved name이 아니라면 kebab-case 를 사용합니다."

현재 (PascalCase) 컨벤션 (kebab-case)
Display1 display1
Title1 / Body1 title1 / body1
semiBold semi-bold

기존 text.tokens.jsonc에서도 large-title, body1-regular 등 kebab-case를 사용하고 있었습니다.
피그마에서 PascalCase를 쓰더라도, 토큰 파일은 프로젝트 컨벤션에 맞춰야 합니다.

5. Typography 구조가 문서화된 컨벤션과 다름

README: "모든 typography는 별도의 객체로 감싸지 않습니다. (감쌀 경우 build 되는 css에 불필요하게 prefix가 붙습니다.)"

// ❌ 현재: 객체로 감싸고 있음
"Title1": {
  "bold": { "$type": "typography", "$value": { ... } },
  "regular": { "$type": "typography", "$value": { ... } }
}

// ✅ 컨벤션: flat + suffix
"title1-bold": { "$type": "typography", "$value": { ... } },
"title1-regular": { "$type": "typography", "$value": { ... } }

만약 구조를 변경하기로 합의했다면, README도 함께 업데이트해주세요.

6. fontSize / lineHeight 토큰에 $type 누락

typography.jsoncfontSize, lineHeight 그룹에 $type 선언이 없습니다.
실질적으로 dimension 값("11px" 등)이므로 "$type": "dimension"이 있어야 스키마 검증이 동작합니다.

7. $schema 일관성 없음

파일 $schema
primitve.tokens.jsonc ✅ 있음
typography.jsonc ⚠️ 있으나 경로 오류
dimension.tokens.jsonc ❌ 없음
radius.tokens.jsonc ❌ 없음
style.jsonc ❌ 없음

🟡 Minor

8. radius 토큰에 $type 누락

radius.tokens.jsonc의 토큰들이 dimension 참조({dimension.4})를 사용하지만, $type 선언이 없습니다.

9. 미사용 토큰: fontSize.t1 (11px)

정의만 되어 있고 style.jsonc의 어떤 typography에서도 참조하지 않습니다.
필요 없다면 제거, 앞으로 사용 예정이라면 코멘트로 남겨주세요.

10. Label3 / Caption2 사이즈 동일

둘 다 fontSize: t2 (12px), lineHeight: t2 (16px)이고 weight만 다릅니다 (semiBold vs bold).
의도한 것이라면 괜찮지만, 피그마 시안과 한 번 더 확인해주세요.


요약

우선순위 항목 수 핵심
🔴 Critical 3 빌드 누락, 오타, 경로 오류
🟠 Major 4 컨벤션 위반, $type/$schema 누락
🟡 Minor 3 미사용 토큰, 확인 필요 항목

@ndaemy ndaemy changed the title typography token 디자인 토큰 구조 정립 (typography, dimension, radius, color) Mar 5, 2026
"$type": "dimension",
"t1": { "$value": "11px" },
"t2": { "$value": "12px" }
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ദ്ദിᐢ. .ᐢ₎ 감사합니다 !!!!!

@yhyem yhyem merged commit a4cf657 into main Mar 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants